<script lang="ts" setup>
import { useEChart } from "@/hooks/useEChart";
import type { EChartCoreOption } from "@/plugins/echarts/index";
import { ref, onMounted, watch } from "vue";
import type { Ref } from "vue";

interface Props {
  options: EChartCoreOption;
  width?: string;
  height?: string;
}
// const props = defineProps<Props>();
const props = withDefaults(defineProps<Props>(), {
  width: "100%",
  height: "300px",
});

const currentOptions = ref(props.options);

const elEChart = ref<HTMLElement>() as Ref<HTMLElement>;
const { init, setOptions } = useEChart(elEChart, currentOptions.value);

watch(
  () => props.options,
  (newValue) => {
    setOptions(newValue);
  }
);

onMounted(() => {
  init();
});
</script>

<template>
  <div :style="{ height: props.height, width: props.width }">
    <div style="height: 100%; width: 100%" ref="elEChart"></div>
  </div>
</template>
